<script setup lang="ts">
import userPay from "@/pages/vip/usePay";
import { useUserInfo } from "@/store/user";
import { ref } from "vue";
import Popup from "@/utils/payment/popup.vue";

const { code, payPopup, meal, selectMeal, onPay, handleClose } = userPay();
const userStore = useUserInfo();
const showMore = ref(false);

const setShowMore = () => {
  showMore.value = !showMore.value;
};
</script>

<template>
  <!-- <Flex class="lock-text" justify="space-between" @click="setShowMore">
    <view class="left">
      <uv-image
        src="../..https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/mine/crown.svg"
        mode="aspectFit"
        :fade="false"
        width="24"
        height="24"
      ></uv-image>
      <text>解锁<text class="light">&nbsp;8&nbsp;</text>项尊贵特权</text>
    </view>
    <image
      src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/ic_AngleRight1.png"
      :class="['right', { show: showMore }]"
    />
  </Flex> -->
  <!-- <view :class="['img_vip', { hide: !showMore }]" /> -->

  <view class="vip-list">
    <Flex>
      <view
        :class="['meal', { active: index === meal.activeIndex }]"
        v-for="(item, index) in meal.list"
        @click="selectMeal(index)"
      >
        <view class="tip" v-if="index === 0"> 推荐 </view>
        <view class="label">{{ item.service_name }}</view>
        <view class="count">{{ item.price / 100 }}</view>
        <view class="pre-count">¥{{ item.list_price / 100 }}</view>
      </view>
    </Flex>
  </view>
  <view class="pay" @click="onPay">
    {{ userStore.isVip ? "续费会员" : "立即开通" }}
  </view>

  <!-- 支付弹窗提示 -->
  <Popup ref="payPopup" :code="code" />
</template>

<style lang="scss" scoped>
.icon_close {
  width: 40px;
  height: 40px;
  background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/icon_close.png");
  background-size: cover;
  margin: 10px auto 0;
}

.icon_robot {
  display: block;
  margin: 0 auto -60px;
  width: 120px;
  height: 108px;
  background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/icon_robot.png");
  background-size: cover;
  z-index: 1;
  position: relative;
}

.kefu-container {
  position: relative;
  background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/kefu-bg.png");
  width: 327px;
  height: 372px;
  background-size: cover;
  box-sizing: border-box;
  padding-top: 80px;

  .tip-text {
    font-size: 12px;
    text-align: center;
    color: #6c6d7b;
    margin-top: 5px;
  }

  .kefu-code {
    width: 200px;
    height: 200px;
    border-radius: 20px;
    margin: 0 auto 16px;
    display: block;
  }

  .kefu-text {
    color: #fff;
    width: 220px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    font-weight: 500;
    margin: 0 auto;
    background: linear-gradient(91.69deg, #406ffd 5.43%, #4048fd 95.39%);
    border-radius: 50px;
  }
}

.lock-text {
  color: #fff;
  font-size: 14px;
  margin-bottom: 16px;

  .left {
    display: flex;

    uni-view {
      margin-right: 4px;
    }

    .light {
      font-weight: 600;
      font-size: 18px;
      color: #495bff;
    }

    uni-text {
      color: #333;
    }
  }

  .right {
    width: 16px;
    height: 16px;
    transform: rotate(90deg);

    &.show {
      transform: rotate(-90deg);
    }
  }
}

.vip-pannel {
  background: linear-gradient(0deg, #212645, #212645),
    linear-gradient(0deg, #4b5074, #4b5074);
  border-radius: 10px;
  padding: 20px 16px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 16px;
}

.panel {
  width: 100%;
  height: 92px;
  // background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/vip-bg1.png");
  background-size: 405px 100%;
  background-position: center center;
  margin: 0 auto 21px;
  color: #19191c;
  box-sizing: border-box;
  padding-top: 14px;
  padding-left: 16px;
  transform: translateX();
  border-radius: 20px;

  .label {
    margin-bottom: 9px;
    font-size: 16px;
    font-weight: 600;
  }

  .sub-label {
    font-size: 12px;
    font-weight: 400;
  }
}

.pay {
  background: linear-gradient(#7684ff, #4355ff);
  width: 100%;
  height: 48px;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  line-height: 48px;
  margin: 16px auto 20px;
}

.page {
  background: linear-gradient(0deg, #212645, #212645),
    linear-gradient(0deg, #4b5074, #4b5074);
}

.img_vip {
  display: block;
  width: 100%;
  height: 242px;
  // background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/img_vip.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin: 0 auto;
  transition: height 0.6s;

  &.hide {
    height: 0;
  }
}

.vip-list {
  width: 100%;
  margin: 0 auto;

  .title {
    font-size: 16px;
    margin-bottom: 20px;
    color: #fff;
  }
}

.tip {
  position: absolute;
  background: #495bff;
  font-size: 12px;
  color: #fff;
  font-weight: 500;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  // border: 2px solid #fbd09f;
  width: 44px;
  height: 24px;
  line-height: 24px;
  top: -12px;
  left: 0;
}

.meal {
  position: relative;
  flex: 1;
  border-radius: 10px;
  margin: 0 4px;
  background: #fff;
  text-align: center;
  box-sizing: border-box;
  padding-top: 18px;
  padding-bottom: 18px;
  transition: background 0.6s;
  border: 1px solid transparent;

  .label {
    color: #333;
    font-size: 14px;
    margin-bottom: 4px;
  }

  .pre-count {
    color: #a0a3b5;
    font-size: 12px;
    text-decoration: line-through;
  }

  .count {
    color: #495bff;
    font-size: 18px;
    font-weight: bold;

    &::before {
      content: "¥";
      font-size: 12px;
      vertical-align: bottom;
      line-height: 22px;
      display: inline-block;
      margin-right: 3px;
    }
  }

  &.active {
    border: 1px solid #495bff;
    background: #e8eaff;

    .label {
      color: #19191c;
    }
  }
}
</style>
